<template>
  <div>
    <a-modal
      :title="title"
      v-model="visible"
      on-ok="handleOk"
      @cancel="handleCancel"
      :width="500">
      <a-table
        :columns="columns"
        :dataSource="dataSource"
        :pagination="false"
      >
        <span slot="action" slot-scope="text, record">
          <a-button shape="circle" icon="search" @click="viewFile(record.url)" v-if="record.viewShow"/>
          <a-divider type="vertical" v-if="record.viewShow"/>
          <a-button shape="circle" icon="download" @click="downloadFile(record.url)"/>
        </span>
      </a-table>
      <template slot="footer">
        <a-button key="back" @click="handleCancel">
          关闭
        </a-button>
      </template>
    </a-modal>
    <a-modal :visible="previewVisible" :footer="null" @cancel="previewVisible = false">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>

    <j-proview :previewImg="previewImg"></j-proview>
  </div>
</template>

<script>
  import { getFileAccessHttpUrl, getAction } from '@/api/manage'
  import jProview from '@/components/jeecg/jProview'
  var myFillName = null

  export default {
    name: 'AuditModal',
    components: {
      jProview
    },
    data() {
      return {
        previewImg: {
          imgList: [], // 所有图片数组
          index: 0, // 当前点击的图片的索引
          infinite: true, // 是否可以循环切换
          popup: false // 弹窗的显示隐藏
        },
        title: '文件列表',
        loading: false,
        visible: false,
        dataSource: [],
        columns: [
          {
            title: '序号',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: 'center',
            customRender: function (t, r, index) {
              return parseInt(index) + 1;
            }
          },
          {
            title: '文件名',
            align: 'center',
            width: 200,
            dataIndex: 'fileName'
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: 'center',
            fixed: 'right',
            width: 147,
            scopedSlots: {
              filterDropdown: 'filterDropdown',
              filterIcon: 'filterIcon',
              customRender: 'action' }
          }
        ],
        previewImage: '',
        previewVisible: false
      };
    },
    methods: {
      handleOk(e) {
      },
      downloadFile(text) {
        if (!text) {
          this.$message.warning('未知的文件')
          return
        }
        let url = getFileAccessHttpUrl(text)
        console.log(url)
        window.open(url)
      },
      async show(file) {
        this.dataSource = [];
        var filetype = ['gif', 'jpg', 'png', 'bmp', 'jpeg', 'webp', 'pdf']
        // 构建数据
        for (let fileKey of file.split(',')) {
          let files = {};

          // ---------------从后台解析文件名称 开始----------------
          let path = fileKey.substring(fileKey.lastIndexOf('/') + 1)
          console.log('path', path)
          await getAction('/api/erpmng/sys/common/queryByFillName', { fillName: path }).then(res => {
            if (res.success) {
              myFillName = res.result
            }
          })
          // ---------------从后台解析文件名称 结束----------------
          if (filetype.indexOf(fileKey.split('.')[fileKey.split('.').length - 1]) > 0) {
            files.viewShow = true
          } else {
            files.viewShow = true
          }
          files.fileName = myFillName
          files.url = fileKey
          this.dataSource.push(files)
          console.log(this.dataSource);
        }
        this.visible = true;
      },
      close() {
        this.$emit('close');
        this.visible = false;
      },
      viewFile(file) {
        if (!file) {
          this.$message.warning('未知的文件')
          return
        }
        var filetype = ['gif', 'jpg', 'png', 'bmp', 'jpeg', 'webp']
        if (filetype.indexOf(file.split('.')[file.split('.').length - 1]) > 0) {
          this.previewImage = getFileAccessHttpUrl(file)
          this.previewVisible = false;
          this.visible = false
          this.previewImg = {
            imgList: [this.previewImage], // 所有图片数组
            index: 0, // 当前点击的图片的索引
            infinite: true, // 是否可以循环切换
            popup: true // 弹窗的显示隐藏
          }
        } else {
          let fileUrl = getFileAccessHttpUrl(file)
          let Base64 = require('js-base64').Base64
          window.open(window._CONFIG['onlinePreviewDomainURL'] + '?url=' + encodeURIComponent(Base64.encode(fileUrl)));
        }
        // let fileUrl=window._CONFIG['staticDomainURL']+'/'+file

        // let docUrl = 'http://119.3.127.92:9999/api/erpmng/sys/common/queryByFillName?fillName'
        // let docUrl = getFileAccessHttpUrl(file)
        // let url = encodeURIComponent(docUrl)
        // console.log('docUrl', docUrl, url)
        // let officeUrl = 'http://view.officeapps.live.com/op/view.aspx?src=' + url
        // // 在新窗口打开编码后 的链接
        // window.open(officeUrl, '_target')

        // let docUrl = getFileAccessHttpUrl(file)
        // window.open('https://view.xdocin.com/view?src=' + encodeURIComponent(docUrl) + '&saveable=true' + encodeURIComponent('view.xdocin.com'));
      },
      handleOverrule(e) {
      },
      handleCancel(e) {
        this.visible = false;
      }
    }
  }
</script>

<style scoped>

</style>
